<template>
  <span v-if="invisible"></span>

  <!-- <div v-else-if="widget === 'dashboard_graph'">
    <WDashboardGraph
      :value_readonly="value_readonly"
      :value_edit="value_edit"
      :editable="editable"
      :data-info="dataInfo"
      :view-info="{ ...viewInfo, node }"
      @on-change="onchange"
    />
  </div> -->

  <!-- <div v-else-if="widget === 'payment'">
    widget: payment

    <WPayment
      :value_readonly="value_readonly"
      :value_edit="value_edit"
      :editable="editable"
      :data-info="dataInfo"
      :view-info="{ ...viewInfo, node }"
      @on-change="onchange"
    />
  </div> -->

  <!-- <div v-else-if="widget === 'kanban_vat_activity'">
    widget: kanban_vat_activity

    <WKanbanVatActivity
      :value_readonly="value_readonly"
      :value_edit="value_edit"
      :editable="editable"
      :data-info="dataInfo"
      :view-info="{ ...viewInfo, node }"
      @on-change="onchange"
    />
  </div> -->

  <!-- <div v-else-if="widget === 'section_and_note_text'">
    widget: section_and_note_text
    <span v-if="readonly || !editable" :class="className">
      {{ [field.type, fname] }}
      {{ value_display }}
    </span>

    <div v-else>
      <OInput
        :value="value"
        :fname="fname"
        :required="required"
        :placeholder="node.attrs.placeholder"
        :element-id="node.attrs.id || node.attrs.name"
        :className="className"
        @on-change="onchange"
      />
    </div>
  </div> -->

  <div v-else-if="widget_todo">{{ [field.type, fname, widget] }}</div>

  <div v-else-if="type === 'cell'">
    <van-form ref="refForm">
      <template v-if="readonly || !editable">
        <van-field type="textarea" autosize readonly :value="value_display">
          <template #label>
            <OLabel :data-info="dataInfo" :view-info="viewInfo" />
          </template>
        </van-field>
      </template>

      <template v-else>
        <van-field
          v-model="value2"
          type="textarea"
          autosize
          :rules="[{ required, message: '不能为空', trigger: 'onChange' }]"
          @blur="handleBlur"
        >
          <template #label>
            {{ required ? '*' : '' }}
            <OLabel :data-info="dataInfo" :view-info="viewInfo" />
          </template>
        </van-field>
      </template>
    </van-form>
  </div>

  <span v-else-if="readonly || !editable" :class="className">
    <!-- {{ [field.type, fname] }} -->
    {{ value_display }}
  </span>

  <div v-else>
    edit: {{ [field.type, fname] }}
    <!-- section_and_note_text -->
    <!-- <OInput
      :value="value"
      type="text"
      :fname="fname"
      :required="required"
      :placeholder="node.attrs.placeholder"
      :element-id="node.attrs.id || node.attrs.name"
      :className="className"
      @on-change="onchange"
    /> -->
  </div>

  <!-- <span v-else> TODO:edit, {{ record[fname] }} </span> -->
</template>

<script>
import OFMixin from './OFMixin'

import OLabel from '../OLabel.vue'

// import WDashboardGraph from './WDashboardGraph.vue'
// import WPayment from './WPayment.vue'
// import WKanbanVatActivity from './WKanbanVatActivity.vue'

// import OInput from './OInput/OInput.vue'

export default {
  name: 'FText',
  components: {
    OLabel
    // WDashboardGraph, WPayment, WKanbanVatActivity, OInput
  },
  mixins: [OFMixin],
  props: {},
  data() {
    return {
      value2: ''
    }
  },
  computed: {
    value_readonly() {
      return this.record[this.fname] || ''
    },

    value() {
      return this.value_edit || ''
    },

    widget_todo() {
      // section_and_note_text
      const done = ['sms_widget']
      return done.includes(this.widget) ? '' : this.widget
    }
  },

  watch: {
    value: {
      // eslint-disable-next-line no-unused-vars
      handler: function (newVal, oldval) {
        // console.log('watch, value:', this.fname, newVal, oldval)
        this.initValue(newVal)
      },
      deep: true,
      immediate: true
    }
  },

  created() {},

  mounted() {
    // console.log(this.viewInfo)
  },

  methods: {
    initValue(value) {
      this.value2 = value
    },

    async handleBlur() {
      console.log('handleBlur', this.value2)
      try {
        await this.$refs.refForm.validate()
        this.onchange(this.value2)
      } catch (e) {
        this.onchange(this.value2, { local_onchange: 1 })
      }
    }
  }
}
</script>

<style type="text/css"></style>
